<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" href="css/common.css" />
	</head>
	<body>
		<header>
			<div class="logo-img">
				<img src="img/logo.png"/>
			</div>
			<div class="head-nav">
				<ul>
					<li class="nav-active"><a href="">首页</a></li>
					<li class="hidden-content" data-id="zhinan"><a data-id="zhinan" href="">办事指南</a></li>
					<li class="hidden-content" data-id="notify"><a data-id="notify" href="">通知公告</a></li>
					<li class="hidden-content" data-id='latest-news'><a data-id="latest-news" href="">新闻动态</a></li>
					<li><a href="">下载中心</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">党务信息</a></li>
				</ul>
				<div class="search">
					<input type="text" name="" id="" value="" />
					<img src="img/search.png"/>
				</div>
				<div style="position: relative;">
					<div class="news-des row zhinan">
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
						</div>
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
						</div>
						<div class="more">
							<span>更多</span>
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
				<div style="position: relative;" >
					<div class="news-des row notify">
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							
						</div>
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
						
						</div>
						<div class="more">
							<span>更多</span>
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
				<div style="position: relative;" >
					<div class="news-des row latest-news">
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							
						</div>
						<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
							<div>
								<p>1.闵行校区校外中、大型及施工车辆入校申请流程</p>
								<p class="new-time">2018-12-22</p>
							</div>
							
						</div>
						<div class="more">
							<span>更多</span>
							<img src="img/more.png"/>
						</div>
					</div>
				</div>
			</div>
		</header>
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/u18.png">
				</div>
				<div class="item">
					<img src="img/u18.png">
				</div>
				<div class="item">
					<img src="img/u18.png">	
				</div>
			</div>
		</div> 
		<div class="hot-news">
			<a href="">【党务信息】纠正四风不止步</a>
		</div>
		<footer>
			<div class="apart">
				<div class="apart-one line">
					<p class="apart-ti">新闻区</p>
					<p>办事指南</p>
					<p>通知公告</p>
					<p>新闻动态</p>
					<p>下载中心</p>
					<p>联系我们</p>
					<p>党务信息</p>
				</div>
				<div class="apart-one line">
					<p class="apart-ti">政策区</p>
					<p>政策法规</p>
					<p>安全教育</p>
					<p>规章制度</p>
				</div>
				<div class="apart-one line">
					<p class="apart-ti">下载区</p>
					<p>文件表格下载</p>
				</div>
				<div class="apart-one line">
					<p class="apart-ti">保卫处热线|各校区保卫处</p>
					<p class="tel">闵行：42131231</p>
					<p class="tel">徐汇：33213213</p>
					<p class="tel">七宝：32131231</p>
				</div>
				<div class="apart-one">
					<img src="img/car.png"/>
					<img style="cursor: pointer;" data-toggle="modal" data-target="#myModal" src="img/feedback.png"/>
				</div>
				
			</div>
			<div class="foot-bottom">
				<p>版权所有�-2018 上海交通大学保卫处 上海市华山路1954号 邮编：200030 沪ICP备05052060</p>
			</div>
		</footer>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div id="feedbackAll" class="modal-body" style="">
		                <div><img src="img/logo.png" style="width: 139px;height: 30px;"><a class="close" data-dismiss="modal">×</a></div>
		                <div id="feedback" align="center" style="margin-top: 10px">
		                    <input id="plateno"  style="text-transform: uppercase" placeholder="您的车牌号">
		                    <select id="packagetype">
		                        <option value="">您购买的套餐为</option>
		                        <option value="闵行、七宝校区A--600元/年">闵行、七宝校区A——600元/年</option>
		                        <option value="闵行、七宝校区B--500元/年">闵行、七宝校区B——500元/年</option>
		                        <option value="闵行、七宝校区C--400元/年">闵行、七宝校区C——400元/年</option>
		                        <option value="闵行、七宝校区D--300元/年">闵行、七宝校区D——300元/年</option>
		                        <option value="闵行、七宝校区E--200元/年">闵行、七宝校区E——200元/年</option>
		                        <option value="闵行、七宝校区F--100元/年">闵行、七宝校区F——100元/年</option>
		                        <option value="徐汇校区A--1200元/年">徐汇校区A——1200元/年</option>
		                        <option value="徐汇校区B--1000元/年">徐汇校区B——1000元/年</option>
		                        <option value="徐汇校区C--800元/年">徐汇校区C——800元/年</option>
		                        <option value="徐汇校区D--600元/年">徐汇校区D——600元/年</option>
		                        <option value="徐汇校区E--400元/年">徐汇校区E——400元/年</option>
		                        <option value="徐汇校区F--200元/年">徐汇校区F——200元/年</option>
		                        <option value="闵行、徐汇综合--900元/年">闵行、徐汇综合——900元/年</option>
		                        <option value="博士闵行校区--600元/年">博士闵行校区——600元/年</option>
		                        <option value="徐汇合作A--6000/年">徐汇合作A——6000/年</option>
		                        <option value="闵行、七宝合作B--3000元/年">闵行、七宝合作B——3000元/年</option>
		                    </select>
		                    <input id="packagetime" placeholder="您购买该套餐的年月">
		                    <input id="remainparktime" placeholder="该套餐剩余时长">
		                    <textarea id="content" placeholder="留言"></textarea>
		                    <button>提交</button>
		                </div>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.3.1.js"
 	 integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 	 crossorigin="anonymous"></script>
 	 <script src="js/bootstrap.js"></script>
 	 <script src="js/flying.js"></script>
 	 <script type="text/javascript">
		$(function(){
			var t=null;
			var current='';
			var swidth=window.screen.availWidth-getScrollWidth();
			$('.foot-bottom').css('min-width',swidth);
			$('#myCarousel').css('min-width',swidth);
			$('#myCarousel').carousel({
			    interval: 3000
			})
			$('.hidden-content').mouseenter(function(e){
				current=e.target.getAttribute('data-id');
				clearTimeout(t)
				$('.news-des').hide(100);
				$('.'+current).show(300);
			})
			$('.hidden-content').mouseleave(function(e){
				current=e.target.getAttribute('data-id');
				t = setTimeout(function () {
					$('.'+current).hide(300)
				},500)
			})
			$('.news-des').mouseenter(function(){
				console.log(current)
				$('.'+current).show(300);
				clearTimeout(t)
			})
			$('.news-des').mouseleave(function(){
				$('.'+current).hide(300);
			})

		})
		//计算出滚动条宽度
		function getScrollWidth() {  
		  var noScroll, scroll, oDiv = document.createElement("DIV");  
		  oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";  
		  noScroll = document.body.appendChild(oDiv).clientWidth;  
		  oDiv.style.overflowY = "scroll";  
		  scroll = oDiv.clientWidth;  
		  document.body.removeChild(oDiv);  
		  return noScroll-scroll;  
		}  
	</script>
</html>
